<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录窗口</title>
    <script src="./vue.js"></script>
    <link href="./theme-chalk.css" rel="stylesheet">
    <script src="./element.js"></script>
    <script src="./axios.js"></script>
    <script src="./lodash.js"></script>
    <script src="./crypto-js.js"></script>
    <link rel="stylesheet" href="../font/iconfonMy.css">
    <script src="./moment.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'serif';
            cursor: default;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            background-color: #3381c1;
            font-size: 0;
        }

        .colse {
            height: 28px;
            -webkit-app-region: drag;
        }

        .colse span {
            color: #fff;
            font-size: 18px;
            line-height: 20px;
            text-align: right;
            float: right;
            padding: 5px 7px;
            -webkit-app-region: no-drag;
        }

        .title {
            color: #fff;
            padding: 0 50px 13px;
            -webkit-app-region: drag;
        }

        .yijt {
            font-size: 30px;
        }

        .xiadxt {
            font-size: 20px;
        }

        .login,
        .qihgognsi,
        .fuwuqi,
        .jiance {
            border: 1px solid transparent;
            background-color: #fff;
            height: calc(100vh - 81px);
            width: 560px;
        }

        .tab_menu {
            padding: 5px 50px;
            font-weight: bold;
        }

        .tab_menu span {
            display: inline-block;
            line-height: 18px;
            border-right: 2px solid #d5d5d5;
            padding: 0 10px;
            font-size: 13px;
        }

        .tab_menu .active {
            background-color: #c8c8c8;
        }

        .neirong {
            display: flex;
            padding: 20px 0 0 50px;
        }

        .nei_left {
            border-right: 1px solid #d3d3d3;
            padding-right: 35px;
            line-height: 25px;
        }

        .n_li {
            margin-bottom: 7px;
        }

        .n_li .name {
            display: inline-block;
            text-align: justify;
            text-align-last: justify;
            width: 52px;
            margin-right: 10px;
            font-size: 13px;
        }

        .n_li select {
            width: 180px;
            line-height: 20px;
            height: 20px;
            font-size: 13px;
        }

        .n_li input {
            width: 180px;
            line-height: 20px;
            height: 20px;
            font-size: 13px;
        }

        .yanzheng {
            display: flex;
            align-items: center;
        }

        .yanzheng input {
            width: 70px;
        }

        .yanzheng .yztp {
            height: 22px;
            line-height: 22px;
            font-size: 16px;
            width: 100px;
        }

        .yanzheng button {
            flex: 1;
            background-color: transparent;
            height: 20px;
            border: none;
            font-size: 13px;
            letter-spacing: -7px;
        }

        .login_btn {
            text-align: center;
            padding-top: 10px;
            margin-bottom: 0;
        }

        .login_btn button {
            border-radius: 3px;
            background-color: #317dc2;
            border: 1px solid #6392bd;
            line-height: 25px;
            width: 110px;
            color: #fff;
            font-size: 14px;
        }

        .nei_right {
            box-sizing: border-box;
            width: 230px;
            padding: 0 35px;
            font-size: 14px;
            position: relative;
        }

        .nei_right button {
            border-radius: 3px;
            color: #363636;
            border: 1px solid #d6d6d6;
            background-color: #e7e7e7;
            display: block;
            font-size: 14px;
            line-height: 25px;
            width: 170px;
            margin-bottom: 15px;
        }

        .nei_right a {
            font-size: 13px;
            position: absolute;
            bottom: 14px;
            width: 140px;
            left: 50%;
            transform: translateX(-50%);
            text-decoration: none;
        }

        .nei_right button:hover {
            background-color: #468cd0;
            color: #fff;
        }

        .qihgognsi_menu {
            padding: 10px;
        }

        .qihTable {
            display: flex;
            padding: 0 10px;
        }

        .qih_left {
            border: 2px solid #aab0b8;
            width: 400px;
            height: 171px;
        }

        .qihu_l_tab {
            border-bottom: 2px solid #f0f2f3;
            line-height: 21px;
            height: 21px;
            display: flex;
        }

        .qihu_l_tab:hover {
            background-color: #dde4eb;
        }

        .qihu_l_tab .name {
            border-right: 2px solid #f0f2f3;
            color: #4388c7;
            width: 30px;
            text-align: center;
            font-size: 13px;
        }

        .qihu_l_tab .val {
            flex: 1;
            height: 21px;
            border-right: 2px solid #f0f2f3;
            font-size: 13px;
        }

        .qih_left .active {
            background-color: #9ecee7;
        }

        .qih_right {
            border: 2px solid #aab0b8;
            flex: 1;
            height: 171x;
            margin-left: 4px;
        }

        .qih_right div {
            background-color: #0078d7;
            color: #fff;
            font-size: 13px;
            line-height: 18px;
        }

        .qihuo_footer {
            font-weight: bold;
            padding: 10px;
            font-size: 13px;
        }

        .qihuo_footer .xqing {
            color: #0101c0;
            text-decoration: none;
        }

        .qihuo_footer button,
        .fuwubtn button,
        .jiance_btn button {
            color: #fff;
            border: 1px solid #f0f2f3;
            border-radius: 3px;
            background-color: #317dc2;
            line-height: 20px;
            width: 77px;
        }

        .qihuo_footer button:nth-of-type(1) {
            margin-left: 8px;
        }

        .fuwuqi_tab {
            font-size: 13px;
            border: 2px solid #878b94;
            margin: 20px 30px;
            height: 173px;
        }

        .fuwuqi_tab_li {
            line-height: 18px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
        }

        .fuwuqi_tab_li span {
            border-right: 1px solid #f0f0f0;
            font-weight: bold;
            line-height: 18px;
            height: 18px;
        }

        .fu_1 {
            flex: 4;
        }

        .fu_2 {
            flex: 1;
        }

        .fu_3 {
            flex: 2;
        }

        .fuwubtn {
            padding: 0 30px;
            text-align: right;
        }

        .fuwubtn button {
            margin-left: 10px;
        }

        .jiance {
            font-size: 13px;
            font-weight: bold;
        }

        .jiance_title {
            padding: 0 30px;
            line-height: 25px;
        }

        .jiance_table {
            border: 2px solid #878b94;
            margin: 0 30px;
            height: 170px;
            overflow: hidden;
        }

        .jiance_table_li {
            line-height: 20px;
            height: 20px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
        }

        .jiance_table_li span {
            line-height: 20px;
            height: 20px;
            border-right: 1px solid #f0f0f0;
            padding: 0 3px;
        }

        .jiance_1 {
            flex: 7;
        }

        .jiance_2 {
            flex: 3;
        }

        .jiance_3 {
            flex: 4;
        }

        .jiance_4 {
            flex: 2;
        }

        .jiance_btn {
            padding: 10px 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .jiance_table .active {
            background-color: #0078d7;
            color: #fff;
        }

        .icon-duigou {
            color: #bd0d1c;
            font-size: 18px;
        }

        .xingxing {
            width: 18px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="colse"><span @click="closeLogin(1)">×</span></div>
        <div class="title">
            <span class="yijt">一键通</span>
            <span class="xiadxt">下单系统</span>
        </div>
        <div class="login" v-show="stutas==1">
            <div class="tab_menu">
                <span :class="{active:tabActive=='期货户'}" @click="tabTap('期货户')">期货户</span>
                <!-- <span :class="{active:tabActive=='外盘户'}" @click="tabTap('外盘户')">外盘户</span> -->
            </div>
            <div class="neirong">
                <div class="nei_left">
                    <div class="n_li">
                        <span class="name">交易网关</span>
                        <select ref="reference">
                            <option value="">期货户-主线路</option>
                        </select>
                    </div>
                    <div class="n_li">
                        <span class="name">资金账号</span>
                        <input type="text" ref="inputBh" v-model="form.bh" @keydown.enter="focusNext('inputPassword')">
                    </div>
                    <div class="n_li">
                        <span class="name">交易密码</span>
                        <input type="password" ref="inputPassword" v-model="form.password"
                            @keydown.enter="focusNext('inputCode')">
                    </div>
                    <div class="n_li yanzheng" v-show="tabActive=='期货户'">
                        <span class="name">验证码</span>
                        <input type="text" ref="inputCode" v-model="form.code" @keydown.enter="sumbitLogin">
                        <span class="yztp" @click="drawCode">
                            <canvas class="code-canvas" ref="codeCanvas" width="100" height="22"></canvas>
                        </span>
                        <!-- <button>···</button> -->
                    </div>
                    <div class="n_li login_btn">
                        <button @click="sumbitLogin">登录</button>
                    </div>
                </div>
                <div class="nei_right">
                    <button @click="stutas=2">选择期货公司</button>
                    <button @click="stutas=3">动态备份</button>
                    <button @click="stutas=4">优选交易网关</button>
                    <a v-show="tabActive=='期货户'" @click="registerClick">注册</a>
                </div>
            </div>
        </div>
        <div class="qihgognsi" v-if="stutas==2">
            <div class="tab_menu qihgognsi_menu">
                <span :class="{active:qhgsActive=='期货公司'}" @click="qhgsActiveTap('期货公司')">期货公司</span>
                <!-- <span :class="{active:qhgsActive=='模拟交易'}" @click="qhgsActiveTap('模拟交易')">模拟交易</span> -->
            </div>
            <div class="qihTable">
                <div class="qih_left">
                    <div class="qihu_l_tab" v-for="(item,index) in 8" :ke="index"
                        @click="index==0?selectqihu_l_tab=index:''">
                        <div class="name"><span v-if="index==0">{{selectqihu_l_Info[qhgsActive].xu}}</span> </div>
                        <div class="val" :class="{active:selectqihu_l_tab==index}"><span
                                v-if="index==0">{{selectqihu_l_Info[qhgsActive].name}}</span>
                        </div>
                        <div class="val"></div>
                        <div class="val"></div>
                        <div class="val"></div>
                        <div class="name"></div>
                    </div>
                </div>
                <div class="qih_right">
                    <div v-if="qhgsActive=='期货公司'">期货</div>
                </div>
            </div>
            <div class="qihuo_footer">
                <span>提醒：博富作为工具软件，你的账户、资金和博富无关。</span>
                <!-- <a href="" class="xqing">详情</a> -->
                <button style="margin-left: 30px;" @click="stutas=1">确定</button>
                <button @click="stutas=1">取消</button>
            </div>
        </div>
        <div class="fuwuqi" v-if="stutas==3">
            <div class="fuwuqi_tab">
                <div class="fuwuqi_tab_li">
                    <span class="fu_1">服务器</span>
                    <span class="fu_2">ping值</span>
                    <span class="fu_3">网络状况</span>
                    <span class="fu_1"></span>
                </div>
                <div class="fuwuqi_tab_li">
                    <span class="fu_1" style="display: flex;align-items: center;">
                        <input type="checkbox" checked>
                        博富
                    </span>
                    <span class="fu_2">{{pingInfo[0].val}}</span>
                    <span class="fu_3" style="display: flex;align-items: center;">
                        <img class="xingxing" src="../img/星星.png" alt="" v-for="it in pingInfo[0].xingVal">
                    </span>
                    <span class="fu_1"></span>
                </div>
                <div class="fuwuqi_tab_li" v-for="item in 5">
                    <span class="fu_1"></span>
                    <span class="fu_2"></span>
                    <span class="fu_3"></span>
                    <span class="fu_1"></span>
                </div>
            </div>
            <div class="fuwubtn">
                <button @click="stutas=1">确定</button>
                <button @click="stutas=1">取消</button>
            </div>
        </div>
        <div class="jiance" v-if="stutas==4">
            <div class="jiance_title">根据IP地址判断，请选择两桶服务器通讯效果会更稳定</div>
            <div class="jiance_table">
                <div class="jiance_table_li">
                    <span class="jiance_1">服务器</span>
                    <span class="jiance_2">ping值</span>
                    <span class="jiance_3">网络状况</span>
                    <span class="jiance_4">选用</span>
                </div>
                <div class="jiance_table_li" v-for="(item,index) in pingInfo" :key="item.name"
                    :class="{active:selectJiance==index}" @click="selectJiance=index">
                    <span class="jiance_1">{{item.name}}</span>
                    <span class="jiance_2">{{item.val}}</span>
                    <span class="jiance_3" style="display: flex;align-items: center;">
                        <img class="xingxing" src="../img/星星.png" alt="" v-for="it in item.xingVal">
                    </span>
                    <span class="jiance_4">
                        <i v-if="selectJiance==index" class="iconfonMy icon-duigou"></i>
                    </span>
                </div>
                <div class="jiance_table_li" v-for="item in 5">
                    <span class="jiance_1"></span>
                    <span class="jiance_2"></span>
                    <span class="jiance_3"></span>
                    <span class="jiance_4"></span>
                </div>
            </div>
            <div class="jiance_btn">
                <div>
                    <button>识别宽商</button>
                    <button @click="pingTap">ping值检测</button>
                </div>
                <div>
                    <button @click="jianceSumbit">确定</button>
                    <button @click="stutas=1">取消</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const { ipcRenderer } = require('electron');
    const fs = require('fs');
    const path = require('path');
    new Vue({
        el: '#app',
        data: {
            stutas: 1,
            tabActive: '期货户',
            qhgsActive: '期货公司',
            selectqihu_l_tab: 0,
            selectqihu_l_Info: {
                '期货公司': {
                    xu: 'T',
                    name: '博富'
                },
                '模拟交易': {
                    xu: 'T',
                    name: '博富实盘交易'
                }
            },
            selectJiance: 0,
            pingInfo: [{ name: '期货户-联通', val: '', xingVal: 0 }, { name: '期货户-电信', val: '', xingVal: 0 }, { name: '期货户-移动', val: '', xingVal: 0 }],
            configInfo: {},
            showNum: [],
            form: {
                bh: "",
                mark: "pc",
                password: "",
                ploatform: "HY",
                code: ''
            },
            sss: ''

        },
        mounted() {
            document.addEventListener('keydown', this.keydown)
            this.selectJiance = localStorage.getItem('selectJiance') || 0
            this.form.bh = localStorage.getItem('bh') || ''
            this.pingInfo = localStorage.getItem('pingInfo') ? JSON.parse(localStorage.getItem('pingInfo')) : this.pingInfo
            ipcRenderer.on('config_Info', (e, v) => {
                this.configInfo = JSON.parse(v)
            })
            // axios.get('http://8.154.45.146:8098/khd/config.json?fff=' + new Date() / 1).then(res => {

            //     res = res.data
            //     let wsType = 'ws://',
            //         httpType = 'http://'
            //     if (res.is_ssl == 1) {
            //         wsType = 'wss://'
            //         httpType = 'https://'
            //     }
            //     res.uploadUrl = httpType + res.uploadUrl
            //     res.updateplay = httpType + res.updateplay
            //     res.ipUrl = httpType + res.ipUrl
            //     res.mqttUrl.wsMqtt_hz = wsType + res.mqttUrl.wsMqtt_hz
            //     res.mqttUrl.wsMqtt_bj = wsType + res.mqttUrl.wsMqtt_bj
            //     res.mqttUrl.wsMqtt_qd = wsType + res.mqttUrl.wsMqtt_qd
            //     res.tradeLine = res.tradeLine.map(item => {
            //         item.node = wsType + item.node
            //         item.url = httpType + item.url
            //         item.mnurl = httpType + item.mnurl
            //         return item
            //     })
            //     this.configInfo = res
            // }, err => {
            //     this.$message.error('请求错误，请稍后重试')
            // })
            this.drawCode()
        },
        beforeDestroy() {
            window.removeEventListener('keydown', this.keydown);
        },
        methods: {
            registerClick() {
                ipcRenderer.send('open-register')
            },
            keydown(event) {
                if (event.keyCode == 13) {
                    if (this.$refs.reference === document.activeElement) {
                        this.focusNext('inputBh')
                    }
                }
            },
            focusNext(refName) {
                const nextElement = this.$refs[refName];
                if (nextElement) {
                    nextElement.focus();
                }
            },
            closeLogin(type, v) {
                let msg = '取消登录!'
                if (type == 2) {
                    msg = '登录成功!'
                    v.bh = this.form.bh
                    v.tradeLine = this.configInfo.tradeLine[0]
                    v.mqttUrl = this.configInfo.mqttUrl
                }
                writeLog('系统', `${this.form.bh}${msg}`, this.form.bh)
                ipcRenderer.send('closeLogin', { type, val: v })
            },
            sumbitLogin: _.debounce(function (event) {
                writeLog('系统', `${this.form.bh}点击登录按钮`, this.form.bh)
                if (!this.configInfo.tradeLine) {
                    this.$alert('请按F5刷新后重试！', '提示', {
                        confirmButtonText: '确定'
                    });
                    return;
                }
                if (!this.form.bh) {
                    this.$alert('资金账号不能为空', '提示', {
                        confirmButtonText: '确定'
                    });
                    return;
                }
                if (!this.form.password) {
                    this.$alert('密码不能为空', '提示', {
                        confirmButtonText: '确定'
                    });
                    return
                }
                let code = this.showNum.join('')
                if (this.tabActive == '期货户' && code != this.form.code) {
                    this.$alert('验证码错误', '提示', {
                        confirmButtonText: '确定'
                    });
                    this.drawCode()
                    return;
                }
                let form = { ...this.form }
                form.password = CryptoJS.MD5(form.password).toString()
                console.log(`output->`, this.configInfo.tradeLine[0].mnurl + '/login')
                axios.post(this.configInfo.tradeLine[0].mnurl + '/login', form).then(res => {
                    if (res.data.code == 0) {
                        this.drawCode()
                        this.form.password = ''
                        this.form.code = ''
                        localStorage.setItem('bh', form.bh)
                        this.closeLogin(2, res.data.data)
                        ipcRenderer.send('set-networkdetail-log', '软件登录成功')
                    } else {
                        this.$message.error(res.data.msg)
                        writeLog(`系统`, `${this.form.bh}${res.data.msg}`, this.form.bh)
                    }
                }, err => {
                    this.$message.error('提交失败，请重试')
                    writeLog(`系统`, `本地网络波动登录失败！`, this.form.bh)
                })
            }, 500),
            tabTap(type) {
                this.tabActive = type
            },
            qhgsActiveTap(type) {
                this.qhgsActive = type
            },
            jianceSumbit() {
                this.stutas = 1
                localStorage.setItem('selectJiance', this.selectJiance)
                localStorage.setItem('pingInfo', JSON.stringify(this.pingInfo))
            },
            pingTap() {
                let startTime = Date.now();
                Math.random()
                fetch(this.configInfo.tradeLine[0].mnurl) // 替换为你要 ping 的 URL
                    .then(response => {
                        let endTime = Date.now();
                        let ping = endTime - startTime;
                        this.pingInfo[0].val = ping + 'ms'
                        this.pingInfo[0].xingVal = this.getXingXing(ping)

                        let ping1 = parseInt(ping * 1 + Math.random() * 100)
                        this.pingInfo[1].val = ping1 + 'ms'
                        this.pingInfo[1].xingVal = this.getXingXing(ping1)

                        let ping2 = parseInt(ping * 1 + Math.random() * 100)
                        this.pingInfo[2].val = ping2 + 'ms'
                        this.pingInfo[2].xingVal = this.getXingXing(ping2)

                    })
                    .catch(error => {
                        this.$message.error('Ping 测量失败')
                    });
            },
            getXingXing(v) {
                let xx
                if (v > 1000) {
                    xx = 1
                }
                if (v > 800 && v <= 1000) {
                    xx = 2
                }
                if (v > 500 && v <= 800) {
                    xx = 3
                }
                if (v > 100 && v <= 500) {
                    xx = 4
                }
                if (v <= 100) {
                    xx = 5
                }
                return xx
            },
            drawCode() {
                if (!this.$refs.codeCanvas) {
                    setTimeout(() => {
                        this.drawCode()
                    }, 500)
                    return;
                }
                let canvas_width = this.$refs.codeCanvas.width;
                let canvas_height = this.$refs.codeCanvas.height;
                let canvas = this.$refs.codeCanvas; //获取到canvas的对象，演员
                let context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
                canvas.width = canvas_width;
                canvas.height = canvas_height;
                let sCode = "1,2,3,4,5,6,7,8,9,0";
                let aCode = sCode.split(",");
                let aLength = aCode.length; //获取到数组的长度

                for (let i = 0; i < 4; i++) {
                    //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
                    let j = Math.floor(Math.random() * aLength); //获取到随机的索引值
                    let deg = Math.random() - 0.5; //产生一个随机弧度
                    let txt = aCode[j]; //得到随机的一个内容
                    this.showNum[i] = txt.toLowerCase();
                    let x = 10 + i * 20; //文字在canvas上的x坐标
                    let y = 15 + Math.random() * 4; //文字在canvas上的y坐标
                    context.font = "bold 20px 微软雅黑";

                    context.translate(x, y);
                    context.rotate(deg);

                    context.fillStyle = this.randomColor();
                    context.fillText(txt, 0, 0);

                    context.rotate(-deg);
                    context.translate(-x, -y);
                }
                for (let i = 0; i <= 5; i++) {
                    //验证码上显示线条
                    context.strokeStyle = this.randomColor();
                    context.beginPath();
                    context.moveTo(
                        Math.random() * canvas_width,
                        Math.random() * canvas_height
                    );
                    context.lineTo(
                        Math.random() * canvas_width,
                        Math.random() * canvas_height
                    );
                    context.stroke();
                }
                for (let i = 0; i <= 30; i++) {
                    //验证码上显示小点
                    context.strokeStyle = this.randomColor();
                    context.beginPath();
                    let x = Math.random() * canvas_width;
                    let y = Math.random() * canvas_height;
                    context.moveTo(x, y);
                    context.lineTo(x + 1, y + 1);
                    context.stroke();
                }
            },
            randomColor() {
                let r = Math.floor(Math.random() * 156);
                let g = Math.floor(Math.random() * 156);
                let b = Math.floor(Math.random() * 156);
                return "rgb(" + r + "," + g + "," + b + ")";
            },
        }
    })
    axios.interceptors.request.use(function (config) {
        config.headers['Cache-Control'] = 'no-cache';
        return config;
    }, function (error) {
        return Promise.reject(error);
    });
    Vue.use(ELEMENT);
    // 写入日志内容
    const writeLog = (type = 0, logMessage = 0, user = 0, date = 0) => {
        let time = date ? date : new Date();
        logMessage = `${type}||${time}||${logMessage}||${user};;`

        let logDirectory = path.resolve(__dirname, '../../../static');
        const logFile = path.join(logDirectory, getLogFileName(date ? date : new Date()));
        if (!fs.existsSync(logDirectory)) {
            fs.mkdirSync(logDirectory);
        }
        try {
            fs.appendFileSync(logFile, logMessage, 'utf-8');
        } catch (err) {
            console.error('创建或写入日志文件时出错:', err);
        }
    };
    const getLogFileName = (date) => {
        return `log_${moment(date).format('YYYY-MM-DD')}.log`;
    };
</script>

</html>